<!DOCTYPE html>
<html>
<head>
    <title>Velocity-Time Graph</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Configuration ---
        const originX = 80;
        const originY = 250;
        const scaleX = 15; // pixels per second
        const scaleY = 20; // pixels per m/s

        // Helper function to convert graph coordinates to canvas coordinates
        function toCanvasX(t) {
            return originX + t * scaleX;
        }

        function toCanvasY(v) {
            return originY - v * scaleY;
        }

        // --- Drawing ---

        // Style for axes and labels
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '16px Arial';
        ctx.lineWidth = 2;

        // Draw Y-axis (Velocity)
        ctx.beginPath();
        ctx.moveTo(toCanvasX(0), toCanvasY(10));
        ctx.lineTo(toCanvasX(0), toCanvasY(-10));
        ctx.stroke();

        // Draw X-axis (Time)
        ctx.beginPath();
        ctx.moveTo(toCanvasX(0), toCanvasY(0));
        ctx.lineTo(toCanvasX(30), toCanvasY(0));
        ctx.stroke();
        
        // Draw Y-axis ticks and labels
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        for (let v = -10; v <= 10; v += 2) {
            const y = toCanvasY(v);
            ctx.beginPath();
            ctx.moveTo(toCanvasX(0) - 5, y);
            ctx.lineTo(toCanvasX(0) + 5, y);
            ctx.stroke();
            ctx.fillText(v, toCanvasX(0) - 10, y);
        }

        // Draw X-axis ticks and labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        for (let t = 5; t <= 30; t += 5) {
            const x = toCanvasX(t);
            ctx.beginPath();
            ctx.moveTo(x, toCanvasY(0) - 5);
            ctx.lineTo(x, toCanvasY(0) + 5);
            ctx.stroke();
            ctx.fillText(t, x, toCanvasY(0) + 10);
        }

        // Draw Axis Labels
        ctx.save();
        ctx.font = '18px Arial';
        // Y-axis label
        ctx.textAlign = 'center';
        ctx.translate(originX - 55, originY);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('Velocity (m/s)', 0, 0);
        ctx.restore();
        // X-axis label
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('Time (s)', toCanvasX(30) + 10, toCanvasY(0));

        // Draw the velocity graph
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 3;
        ctx.setLineDash([8, 6]);

        // Segment 1: t=0 to 12, v=8
        ctx.moveTo(toCanvasX(0), toCanvasY(8));
        ctx.lineTo(toCanvasX(12), toCanvasY(8));
        
        // Segment 2: instantaneous change at t=12 from v=8 to v=-6
        ctx.lineTo(toCanvasX(12), toCanvasY(-6));

        // Segment 3: t=12 to 28, v=-6
        ctx.lineTo(toCanvasX(28), toCanvasY(-6));

        ctx.stroke();
    </script>
</body>
</html>